<template>
  <div id="settlement-detail">
    <nav aria-label="breadcrumb" role="navigation">
      <ol class="breadcrumb mb-0">
        <li class="breadcrumb-item ms-2">
          <router-link to="/ent/settlements">结算单</router-link>
        </li>
        <li class="breadcrumb-item active" aria-current="page">详情</li>
        <span class="ms-auto me-2" @click.stop="back()">返回</span>
      </ol>
    </nav>
    <template v-if="detail !== null">
      <div class="card mb-0">
        <table class="table table-striped table-sm mb-0">
          <thead>
            <tr>
              <th>结算单号</th>
              <th>名称</th>
              <th>客户</th>
              <th>金额</th>
              <th>收款状态</th>
              <th>创建时间</th>
              <th>修改时间</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>{{ detail.settlementNo }}</td>
              <td>{{ detail.name }}</td>
              <td>
                <template v-if="detail.customerType === 0"> 散客 </template>
                <template v-else-if="detail.customer !== null">
                  {{ detail.customer.name }}
                </template>
              </td>
              <td>
                <a href="javascript:void(0)" @click.stop="adjustAmount()">
                  {{ detail.amount }}
                </a>
              </td>
              <td>
                <template v-if="detail.paid === 0">
                  <span class="text-danger">未收款</span>
                  <button
                    class="btn btn-sm btn-danger"
                    v-if="detail.amount === 0"
                    @click.stop="writeOff()"
                  >
                    销账
                  </button>
                </template>
                <template v-else>
                  <span class="text-success">已收款</span>
                  <button
                    class="btn btn-sm btn-danger"
                    @click.stop="undoWriteOff()"
                    v-if="isAdmin"
                  >
                    撤销
                  </button>
                </template>
              </td>
              <td>{{ detail.createTime }}</td>
              <td>{{ detail.lastUpdate }}</td>
              <td>
                <button class="btn btn-sm btn-success" @click.stop="refresh()">
                  刷新
                </button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      <ul class="nav nav-tabs nav-bordered mb-3" id="myTab" role="tablist">
        <li class="nav-item">
          <a
            class="nav-link active"
            id="bills-tab"
            data-bs-toggle="tab"
            href="#bills"
            role="tab"
            aria-controls="bills"
            aria-selected="true"
            >所有账单</a
          >
        </li>
        <li class="nav-item" v-if="ticketCount > 0">
          <a
            class="nav-link"
            id="flight-tab"
            data-bs-toggle="tab"
            href="#flight"
            role="tab"
            aria-controls="flight"
            aria-selected="false"
            >机票 <small>({{ ticketCount }},{{ totalTicketAmount }})</small></a
          >
        </li>
        <li class="nav-item" v-if="refundCount > 0">
          <a
            class="nav-link"
            id="refund-tab"
            data-bs-toggle="tab"
            href="#refund"
            role="tab"
            aria-controls="refund"
            aria-selected="false"
            >退票 <small>({{ refundCount }},{{ totalRefundAmount }})</small></a
          >
        </li>
        <li class="nav-item" v-if="changeCount > 0">
          <a
            class="nav-link"
            id="change-tab"
            data-bs-toggle="tab"
            href="#change"
            role="tab"
            aria-controls="change"
            aria-selected="false"
            >改签 <small>({{ changeCount }},{{ totalChangeAmount }})</small></a
          >
        </li>
        <li class="nav-item" v-if="hotelCount > 0">
          <a
            class="nav-link"
            id="hotel-tab"
            data-bs-toggle="tab"
            href="#hotel"
            role="tab"
            aria-controls="hotel"
            aria-selected="false"
            >酒店<small>({{ hotelCount }},{{ totalHotelAmount }})</small></a
          >
        </li>
        <li class="nav-item" v-if="trainCount > 0">
          <a
            class="nav-link"
            id="train-tab"
            data-bs-toggle="tab"
            href="#train"
            role="tab"
            aria-controls="train"
            aria-selected="false"
            >火车票<small>({{ trainCount }},{{ totalTrainAmount }})</small></a
          >
        </li>
        <li class="nav-item" v-if="carCount > 0">
          <a
            class="nav-link"
            id="car-tab"
            data-bs-toggle="tab"
            href="#car"
            role="tab"
            aria-controls="train"
            aria-selected="false"
            >用车<small>({{ carCount }},{{ totalCarAmount }})</small></a
          >
        </li>
        <li class="nav-item" v-if="vasCount > 0">
          <a
            class="nav-link"
            id="vas-tab"
            data-bs-toggle="tab"
            href="#vas"
            role="tab"
            aria-controls="vas"
            aria-selected="false"
            >服务<small>({{ vasCount }},{{ totalVasAmount }})</small></a
          >
        </li>
        <li class="nav-item">
          <a
            class="nav-link"
            id="log-tab"
            data-bs-toggle="tab"
            href="#log"
            role="tab"
            aria-controls="log"
            aria-selected="false"
            >日志</a
          >
        </li>
      </ul>
      <div class="tab-content" id="myTabContent">
        <div
          class="tab-pane fade show active"
          id="bills"
          role="tabpanel"
          aria-labelledby="bills-tab"
        >
          <div class="card">
            <div class="card-body">
              <form class="row">
                <div class="col-1">
                  <my-date-picker
                    id="billDate0"
                    v-model="billDate0"
                    placeholder="账单日期"
                  ></my-date-picker>
                </div>
                <div class="col-1">
                  <input
                    type="textfield"
                    class="form-control ms-1"
                    size="8"
                    placeholder="账单号"
                    v-model.trim="billNum"
                  />
                </div>
                <div class="col-1">
                  <input
                    type="textfield"
                    class="form-control ms-1"
                    size="8"
                    placeholder="订单号"
                    v-model.trim="orderNo"
                  />
                </div>
                <div class="col-1">
                  <input
                    type="textfield"
                    class="form-control ms-1"
                    size="8"
                    placeholder="原订单号"
                    v-model.trim="flightOrderNo"
                  />
                </div>
                <div class="col-1">
                  <input
                    type="textfield"
                    class="form-control ms-1"
                    size="8"
                    placeholder="姓名"
                    v-model.trim="psgName"
                  />
                </div>
                <div class="col">
                  <button
                    type="button"
                    class="btn btn-primary ms-1"
                    @click.stop="searchBills()"
                  >
                    查找账单
                  </button>
                  <button
                    type="button"
                    class="btn btn-secondary btn-sm ms-1"
                    @click.stop="reset()"
                  >
                    重置
                  </button>

                  <button
                    type="button"
                    class="btn btn-danger float-end"
                    @click.stop="removeAllBills()"
                  >
                    移除所有账单
                  </button>
                </div>
              </form>
            </div>
            <table class="table table-striped table-hover table-sm">
              <thead>
                <tr class="">
                  <th>账单类型</th>
                  <th>账单日期</th>
                  <th>账单号</th>
                  <th>订单号</th>
                  <th>原订单号</th>
                  <th>收款方式</th>
                  <th class="text-end">金额</th>
                  <th class="text-end">成本</th>
                  <th class="text-end">利润</th>
                  <th class="text-end">结算日期</th>
                  <th class="text-end"></th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td colspan="12"></td>
                </tr>
                <template v-for="(info, index) in detail.bills">
                  <tr :key="`bill-` + info.id">
                    <td>
                      {{ getTypeDesc(info.billType) }}
                    </td>
                    <td>{{ info.opDate }}</td>
                    <td>
                      <router-link
                        :to="`/bill/detail/` + info.id"
                        target="_blank"
                        >{{ info.billNum }}</router-link
                      >
                      <a
                        href="javascript:void(0)"
                        @click.stop="showBillDetail(info, index)"
                        class="small text-success"
                        >查看</a
                      >
                    </td>

                    <td>{{ info.orderNo }}</td>
                    <td>{{ info.flightOrderNo }}</td>
                    <td>
                      {{ info.payTypeNoteDesc }}
                      <template v-if="info.bePaid === '0'">
                        <span class="text-danger small">未收款</span>
                      </template>
                    </td>
                    <td class="text-end">{{ info.billSum }}</td>
                    <td class="text-end">{{ info.cost }}</td>
                    <td class="text-end">{{ info.profit }}</td>
                    <td class="text-end">{{ info.settleDate }}</td>
                    <td class="text-end">
                      <template v-if="detail.paid === 0 || info.bePaid === '0'">
                        <button
                          class="btn btn-danger btn-sm"
                          @click.stop="removeBill(info.billNum)"
                        >
                          移除
                        </button>
                      </template>
                    </td>
                  </tr>
                  <tr
                    :key="`bill-detail-` + info.id"
                    :id="`bill-detail-` + info.id"
                    v-if="hasDetail(info)"
                    class="text-center"
                  >
                    <td colspan="2"></td>
                    <td colspan="10">
                      <bill-detail-flight
                        :detailInfo="info"
                        :hideLabel="true"
                      ></bill-detail-flight>
                      <bill-detail-refund
                        :detailInfo="info"
                        :hideLabel="true"
                      ></bill-detail-refund>
                      <bill-detail-change
                        :detailInfo="info"
                        :hideLabel="true"
                      ></bill-detail-change>
                      <bill-detail-vas
                        :detailInfo="info"
                        :hideLabel="true"
                      ></bill-detail-vas>
                    </td>
                  </tr>
                </template>
              </tbody>
            </table>
          </div>
        </div>
        <div
          class="tab-pane fade"
          id="flight"
          role="tabpanel"
          aria-labelledby="flight-tab"
        >
          <div class="card">
            <div class="card-body">
              <form class="row">
                <div class="col-1">
                  <input
                    type="textfield"
                    class="form-control"
                    size="10"
                    placeholder="票号"
                    v-model.trim="ticketNo"
                  />
                </div>
                <div class="col-1">
                  <input
                    type="textfield"
                    class="form-control"
                    size="10"
                    placeholder="姓名"
                    v-model.trim="passengerName"
                  />
                </div>
                <div class="col">
                  <button
                    type="button"
                    class="btn btn-primary ms-1"
                    @click.stop="searchTickets()"
                  >
                    查找
                  </button>
                  <button
                    type="button"
                    class="btn btn-secondary btn-sm ms-2"
                    @click.stop="reset3()"
                  >
                    重置
                  </button>
                </div>
              </form>
            </div>
            <table class="table table-striped table-hover table-sm">
              <thead>
                <tr>
                  <th>票号</th>
                  <th>乘机人</th>
                  <th>出票日期</th>
                  <th colspan="5" class="bg-info text-center text-white">
                    行程
                  </th>
                  <th class="text-center">实收</th>
                  <th class="text-center">成本</th>
                  <th class="text-center">利润</th>
                  <th>账单号</th>
                  <th></th>
                </tr>
              </thead>
              <tbody>
                <tr
                  v-for="(info, index) in tickets"
                  :key="`ticket_id_` + info.id"
                  :class="{ 'bg-success text-white': info.bePaid === '1' }"
                >
                  <td>{{ info.showTicketNo }}</td>
                  <td class="">{{ info.passengerName }}</td>
                  <td>{{ info.etdzDate }}</td>
                  <td>
                    <template v-for="(flt, index) in info.details">
                      {{ flt.dport }}{{ flt.dportName }}
                      <template v-if="index < info.details.length - 1">
                        <br />
                      </template>
                    </template>
                  </td>
                  <td>
                    <template v-for="(flt, index) in info.details">
                      {{ flt.aport }}{{ flt.aportName }}
                      <template v-if="index < info.details.length - 1"
                        ><br
                      /></template>
                    </template>
                  </td>
                  <td>
                    <template v-for="(flt, index) in info.details">
                      {{ flt.ddate }}
                      <template v-if="index < info.details.length - 1"
                        ><br
                      /></template>
                    </template>
                  </td>
                  <td>
                    <template v-for="(flt, index) in info.details">
                      {{ flt.flight }}
                      <template v-if="index < info.details.length - 1"
                        ><br
                      /></template>
                    </template>
                  </td>
                  <td>
                    <template v-for="(flt, index) in info.details">
                      {{ flt.subclass }}
                      <template v-if="index < info.details.length - 1"
                        ><br
                      /></template>
                    </template>
                  </td>
                  <td class="text-end">{{ info.accountRecv }}</td>
                  <td class="text-end">{{ info.cost }}</td>
                  <td class="text-end">{{ info.profit }}</td>
                  <td class="">
                    <router-link
                      :to="`/bill/detail/0?billNum=` + info.billNum"
                      >{{ info.billNum }}</router-link
                    >
                  </td>
                  <td>
                    <template v-if="detail.paid === 0 || info.bePaid === '0'">
                      <a
                        href="javascript:void(0)"
                        @click.stop.prevent="removeBill(info.billNum)"
                        class="text-danger"
                        >移除</a
                      >
                    </template>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
        <div
          class="tab-pane fade"
          id="refund"
          role="tabpanel"
          aria-labelledby="refund-tab"
        >
          <div class="card">
            <div class="card-body">
              <form class="">
                <div class="col-1">
                  <button
                    type="button"
                    class="btn btn-primary ms-1"
                    @click.stop="searchRefunds()"
                  >
                    查找
                  </button>
                </div>
              </form>
            </div>
            <table class="table table-striped table-hover table-sm">
              <thead>
                <tr>
                  <th>票号</th>
                  <th>乘机人</th>
                  <th colspan="5" class="bg-info text-center text-white">
                    行程
                  </th>
                  <th class="text-end">实收</th>
                  <th class="text-end">成本</th>
                  <th class="text-end">利润</th>
                  <th class="text-center">订单号</th>
                  <th>账单号</th>
                  <th></th>
                </tr>
              </thead>
              <tbody>
                <tr
                  v-for="(info, index) in refunds"
                  :class="{ 'bg-success text-white': info.bePaid === '1' }"
                >
                  <td>{{ info.balanceCode }}-{{ info.ticketNo }}</td>
                  <td class="">{{ info.psgName }}</td>
                  <td>
                    <template v-for="(flt, index) in info.flights">
                      {{ flt.departureAirport }}{{ flt.dportName }}
                      <template v-if="index < info.flights.length - 1"
                        ><br
                      /></template>
                    </template>
                  </td>
                  <td>
                    <template v-for="(flt, index) in info.flights">
                      {{ flt.arrivalAirport }}{{ flt.aportName }}
                      <template v-if="index < info.flights.length - 1"
                        ><br
                      /></template>
                    </template>
                  </td>
                  <td>
                    <template v-for="(flt, index) in info.flights">
                      {{ flt.departureDate }}
                      <template v-if="index < info.flights.length - 1"
                        ><br
                      /></template>
                    </template>
                  </td>
                  <td>
                    <template v-for="(flt, index) in info.flights">
                      {{ flt.flightNo }}
                      <template v-if="index < info.flights.length - 1"
                        ><br
                      /></template>
                    </template>
                  </td>
                  <td>
                    <template v-for="(flt, index) in info.flights">
                      {{ flt.subclass }}
                      <template v-if="index < info.flights.length - 1"
                        ><br
                      /></template>
                    </template>
                  </td>
                  <td class="text-end">{{ info.passengerRefundAmount }}</td>
                  <td class="text-end">{{ info.airlineRefundAmount }}</td>
                  <td class="text-end">{{ info.profit }}</td>
                  <td class="text-center">{{ info.refundOrderNo }}</td>
                  <td>
                    <router-link
                      :to="`/bill/detail/0?billNum=` + info.billNum"
                      target="_blank"
                      >{{ info.billNum }}</router-link
                    >
                  </td>
                  <td>
                    <template v-if="detail.paid === 0 || info.bePaid === '0'">
                      <a
                        href="javascript:void(0)"
                        @click.stop.prevent="removeBill(info.billNum)"
                        class="text-danger"
                        >移除</a
                      >
                    </template>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
        <div
          class="tab-pane fade"
          id="change"
          role="tabpanel"
          aria-labelledby="change-tab"
        >
          <div class="card">
            <div class="card-body">
              <form class="">
                <div class="col-1">
                  <button
                    type="button"
                    class="btn btn-primary ms-1"
                    @click.stop="searchChanges()"
                  >
                    查找
                  </button>
                </div>
              </form>
            </div>
            <table class="table table-striped table-hover table-sm">
              <thead>
                <tr>
                  <th>票号</th>
                  <th>乘机人</th>
                  <th colspan="5" class="bg-info text-center text-white">
                    行程
                  </th>
                  <th class="text-end">实收</th>
                  <th class="text-end">成本</th>
                  <th class="text-end">利润</th>
                  <td class="text-center">订单号</td>
                  <th>账单号</th>
                  <th></th>
                </tr>
              </thead>
              <tbody>
                <tr
                  v-for="(info, index) in changes"
                  :class="{ 'bg-success text-white': info.bePaid === '1' }"
                >
                  <td>{{ info.balanceCode }}-{{ info.ticketNo }}</td>
                  <td class="">{{ info.psgName }}</td>
                  <td>
                    <template v-for="(flt, index) in info.flights">
                      {{ flt.departureAirport }}{{ flt.dportName }}
                      <template v-if="index < info.flights.length - 1"
                        ><br
                      /></template>
                    </template>
                  </td>
                  <td>
                    <template v-for="(flt, index) in info.flights">
                      {{ flt.arrivalAirport }}{{ flt.aportName }}
                      <template v-if="index < info.flights.length - 1"
                        ><br
                      /></template>
                    </template>
                  </td>
                  <td>
                    <template v-for="(flt, index) in info.flights">
                      {{ flt.departureDate }}
                      <template v-if="index < info.flights.length - 1"
                        ><br
                      /></template>
                    </template>
                  </td>
                  <td>
                    <template v-for="(flt, index) in info.flights">
                      {{ flt.flightNo }}
                      <template v-if="index < info.flights.length - 1"
                        ><br
                      /></template>
                    </template>
                  </td>
                  <td>
                    <template v-for="(flt, index) in info.flights">
                      {{ flt.subclass }}
                      <template v-if="index < info.flights.length - 1"
                        ><br
                      /></template>
                    </template>
                  </td>
                  <td class="text-end">
                    {{ info.airChangeCharge + info.serviceCharge }}
                  </td>
                  <td class="text-end">{{ info.airChangeCharge }}</td>
                  <td class="text-end">{{ info.serviceCharge }}</td>
                  <td class="text-center">{{ info.changeOrderNo }}</td>
                  <td class="">
                    <router-link
                      :to="`/bill/detail/0?billNum=` + info.billNum"
                      >{{ info.billNum }}</router-link
                    >
                  </td>
                  <td>
                    <template v-if="detail.paid === 0 || info.bePaid === '0'">
                      <a
                        href="javascript:void(0)"
                        @click.stop.prevent="removeBill(info.billNum)"
                        class="text-danger"
                        >移除</a
                      >
                    </template>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
        <div
          class="tab-pane fade"
          id="vas"
          role="tabpanel"
          aria-labelledby="vas-tab"
        >
          <div class="card">
            <div class="card-body">
              <form class="">
                <div class="col-1">
                  <button
                    type="button"
                    class="btn btn-primary ms-1"
                    @click.stop="searchVases()"
                  >
                    查找
                  </button>
                </div>
              </form>
            </div>
            <table class="table table-striped table-hover table-sm">
              <thead>
                <tr>
                  <th>服务名称</th>
                  <th>乘机人</th>
                  <th class="text-end">实收</th>
                  <th class="text-end">利润</th>
                  <th class="text-center">订单号</th>
                  <th>账单号</th>
                  <th></th>
                </tr>
              </thead>
              <tbody>
                <tr
                  v-for="(info, index) in vasList"
                  :class="{ 'bg-success text-white': info.bePaid === '1' }"
                >
                  <td>{{ info.productName }}</td>
                  <td class="">{{ info.passengerName }}</td>

                  <td class="text-end">{{ info.total }}</td>
                  <td class="text-end">{{ info.profit }}</td>
                  <td class="text-center">{{ info.orderNo }}</td>
                  <td class="">
                    <router-link
                      :to="`/bill/detail/0?billNum=` + info.billNum"
                      >{{ info.billNum }}</router-link
                    >
                  </td>
                  <td>
                    <template v-if="detail.paid === 0 || info.bePaid === '0'">
                      <a
                        href="javascript:void(0)"
                        @click.stop.prevent="removeBill(info.billNum)"
                        class="text-danger"
                        >移除</a
                      >
                    </template>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
        <div
          class="tab-pane fade"
          id="hotel"
          role="tabpanel"
          aria-labelledby="hotel-tab"
        >
          <div class="card">
            <div class="card-body">
              <form class="">
                <div class="col-1">
                  <button
                    type="button"
                    class="btn btn-primary ms-1"
                    @click.stop="searchHotels()"
                  >
                    查找
                  </button>
                </div>
              </form>
            </div>
            <table class="table table-striped table-hover table-sm">
              <thead>
                <tr>
                  <th>酒店</th>
                  <th>入住人</th>
                  <th>房型</th>
                  <th>入住日期</th>
                  <th>离店日期</th>
                  <th class="text-end">实收</th>
                  <th class="text-end">成本</th>
                  <th class="text-end">利润</th>
                  <th>账单号</th>
                  <th></th>
                </tr>
              </thead>
              <tbody>
                <tr
                  v-for="(info, index) in hotelList"
                  :class="{ 'bg-success text-white': info.bePaid === '1' }"
                >
                  <td>{{ info.hotelName }}</td>
                  <td class="">{{ info.passengerName }}</td>
                  <td class="">{{ info.roomType }}</td>
                  <td class="">{{ info.ddate }}</td>
                  <td class="">{{ info.leaveDate }}</td>
                  <td class="text-end">{{ info.totalAmount }}</td>
                  <td class="text-end">{{ info.totalCost }}</td>
                  <td class="text-end">{{ info.profit }}</td>
                  <td class="">
                    <router-link
                      :to="`/bill/detail/0?billNum=` + info.billNum"
                      >{{ info.billNum }}</router-link
                    >
                  </td>
                  <td>
                    <template v-if="detail.paid === 0 || info.bePaid === '0'">
                      <a
                        href="javascript:void(0)"
                        @click.stop.prevent="removeBill(info.billNum)"
                        class="text-danger"
                        >移除</a
                      >
                    </template>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
        <div
          class="tab-pane fade"
          id="train"
          role="tabpanel"
          aria-labelledby="train-tab"
        >
          <div class="card">
            <div class="card-body">
              <form class="">
                <div class="col-1">
                  <button
                    type="button"
                    class="btn btn-primary ms-1"
                    @click.stop="searchTrains()"
                  >
                    查找
                  </button>
                </div>
              </form>
            </div>
            <table class="table table-striped table-hover table-sm">
              <thead>
                <tr>
                  <th>乘车人</th>
                  <th>出发</th>
                  <th>到达</th>
                  <th>出发日期</th>
                  <th>车次</th>
                  <th>座位</th>
                  <th class="text-end">实收</th>
                  <th class="text-end">成本</th>
                  <th class="text-end">利润</th>
                  <th>账单号</th>
                  <th></th>
                </tr>
              </thead>
              <tbody>
                <tr
                  v-for="(info, index) in trainList"
                  :class="{ 'bg-success text-white': info.bePaid === '1' }"
                >
                  <td class="">{{ info.passengerName }}</td>
                  <td>{{ info.dcity }}</td>
                  <td class="">{{ info.acity }}</td>
                  <td class="">{{ info.ddate }}</td>
                  <td class="">{{ info.trainNo }}</td>
                  <td class="">{{ info.seatClass }}</td>
                  <td class="text-end">{{ info.total }}</td>
                  <td class="text-end">{{ info.totalCost }}</td>
                  <td class="text-end">{{ info.serviceCharge }}</td>
                  <td class="">
                    <router-link
                      :to="`/bill/detail/0?billNum=` + info.billNum"
                      >{{ info.billNum }}</router-link
                    >
                  </td>
                  <td>
                    <template v-if="detail.paid === 0 || info.bePaid === '0'">
                      <a
                        href="javascript:void(0)"
                        @click.stop.prevent="removeBill(info.billNum)"
                        class="text-danger"
                        >移除</a
                      >
                    </template>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
        <div
          class="tab-pane fade"
          id="car"
          role="tabpanel"
          aria-labelledby="car-tab"
        >
          <div class="card">
            <div class="card-body">
              <form class="">
                <div class="col-1">
                  <button
                    type="button"
                    class="btn btn-primary ms-1"
                    @click.stop="searchCars()"
                  >
                    查找
                  </button>
                </div>
              </form>
            </div>
            <table class="table table-striped table-hover table-sm">
              <thead>
                <tr>
                  <th>联系人</th>
                  <th>城市</th>
                  <th>出发</th>
                  <th>到达</th>
                  <th>用车时间</th>
                  <th>车型</th>
                  <th class="text-end">实收</th>
                  <th class="text-end">成本</th>
                  <th class="text-end">利润</th>
                  <th>账单号</th>
                  <th></th>
                </tr>
              </thead>
              <tbody>
                <tr
                  v-for="(info, index) in carList"
                  :class="{ 'bg-success text-white': info.bePaid === '1' }"
                  :key="`car-` + index"
                >
                  <td>{{ info.linkman }}</td>
                  <td>{{ info.cityName }}</td>
                  <td>{{ info.departureAddress }}</td>
                  <td class="">{{ info.arrivalAddress }}</td>
                  <td class="">{{ info.useTime }}</td>
                  <td class="">{{ info.vehicleTypeName }}</td>
                  <td class="text-end">{{ info.total }}</td>
                  <td class="text-end">{{ info.cost }}</td>
                  <td class="text-end">{{ info.profit }}</td>
                  <td class="">
                    <router-link
                      :to="`/bill/detail/0?billNum=` + info.billNum"
                      >{{ info.billNum }}</router-link
                    >
                  </td>
                  <td>
                    <template v-if="detail.paid === 0 || info.bePaid === '0'">
                      <a
                        href="javascript:void(0)"
                        @click.stop.prevent="removeBill(info.billNum)"
                        class="text-danger"
                        >移除</a
                      >
                    </template>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>

        <div
          class="tab-pane fade"
          id="log"
          role="tabpanel"
          aria-labelledby="log-tab"
        >
          <div class="card mt-5">
            <table class="table table-sm table-striped">
              <thead>
                <tr class="bg-info text-white">
                  <td>操作员</td>
                  <td>内容</td>
                  <td>
                    时间
                    <button
                      class="btn btn-sm btn-primary float-end"
                      @click.stop="searchHistory()"
                    >
                      操作记录
                    </button>
                  </td>
                </tr>
              </thead>
              <tbody>
                <tr v-for="info in histories" :key="info.id">
                  <td>{{ info.operator }}</td>
                  <td>{{ info.content }}</td>
                  <td>{{ info.createTime }}</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </template>

    <my-modal-price-remark ref="modalAdjustAmount">
      <span slot="title">{{ modalTitle }}</span>
    </my-modal-price-remark>
    <my-modal-prompt ref="modalPrompt" :nullable="modalNullable">
      <span slot="title">{{ modalTitle }}</span>
    </my-modal-prompt>
  </div>
</template>

<script>
import {
  removeBillOfSettlement,
  removeAllBills,
  searchSettlementDetail,
  getBillTypeDesc,
  searchSettlementHistory,
  searchSettlementBills,
  adjustSettlementAmount,
  writeOffSettlement,
  undoWriteOffSettlement,
} from "@/api/bill.js";
import {
  searchSettlementTickets,
  searchSettlementRefunds,
  searchSettlementChanges,
  searchSettlementVases,
  searchSettlementHotels,
  searchSettlementTrains,
  searchSettlementCars,
} from "@/api/bill.js";
import { searchBillDetail } from "@/api/bill.js";
import MyModalPriceRemark from "@/components/modal/my-modal-price-remark.vue";
import MyModalPrompt from "@/components/modal/my-modal-prompt.vue";
import MyDatePicker from "@/components/my-datepicker.vue";

import BillDetailInfo from "./bill-detail-info.vue";
import BillDetailFlight from "./bill-detail-flight.vue";
import BillDetailTrain from "./bill-detail-train.vue";
import BillDetailHotel from "./bill-detail-hotel.vue";
import BillDetailRefund from "./bill-detail-refund.vue";
import BillDetailVas from "./bill-detail-vas.vue";
import BillDetailChange from "./bill-detail-change.vue";
import BillDetailCar from "./bill-detail-car.vue";

export default {
  components: {
    MyModalPriceRemark,
    MyModalPrompt,
    MyDatePicker,

    BillDetailFlight,
    BillDetailTrain,
    BillDetailHotel,
    BillDetailRefund,
    BillDetailVas,
    BillDetailChange,
    BillDetailCar,
  },
  data() {
    return {
      id: 0,
      detail: null,
      histories: [],

      billNum: "",
      orderNo: "",
      flightOrderNo: "",
      psgName: "",
      billDate0: "",

      modalTitle: "",
      modalNullable: false,

      passengerName: "",
      ticketNo: "",
      tickets: [],
      ticketCount: 0,
      totalTicketAmount: 0,

      refunds: [],
      refundCount: 0,
      totalRefundAmount: 0,

      changes: [],
      changeCount: 0,
      totalChangeAmount: 0,

      vasList: [],
      vasCount: 0,
      totalVasAmount: 0,

      hotelList: [],
      hotelCount: 0,
      totalHotelAmount: 0,

      trainList: [],
      trainCount: 0,
      totalTrainAmount: 0,

      carList: [],
      carCount: 0,
      totalCarAmount: 0,
    };
  },
  computed: {
    isAdmin() {
      return this.$store.getters.isAdmin;
    },
  },
  mounted: function () {
    this.id = this.$route.params.id;
    this.refresh();
  },
  methods: {
    back: function () {
      this.$router.go(-1);
    },
    showErrMsg: function (msg, msgType) {
      this.$store.dispatch("showAlertMsg", {
        errMsg: msg,
        errMsgType: msgType,
      });
    },
    showLoading: function (loadingText) {
      this.$store.commit("showLoading", {
        loading: true,
        loadingText: loadingText,
      });
    },
    hideLoading: function () {
      this.$store.commit("showLoading", { loading: false });
    },
    refresh: function () {
      this.showLoading();
      searchSettlementDetail(
        this.id,
        (jsonResult) => {
          this.detail = jsonResult;

          this.searchTickets();
          this.searchRefunds();
          this.searchChanges();
          this.searchVases();
          this.searchHotels();
          this.searchTrains();
          this.searchCars();
        },
        () => {
          this.hideLoading();
        }
      );
    },
    getTypeDesc: function (v) {
      return getBillTypeDesc(v);
    },
    removeBill: function (billNum) {
      this.showLoading("处理中");
      removeBillOfSettlement(this.id, billNum, (v) => {
        if (v.status === "OK") {
          // this.refresh()
          this.showErrMsg("移除操作成功");
          this.removeBillFromBills(billNum);
        } else {
          this.showErrMsg("移除操作失败: " + v.errmsg, "danger");
        }
        this.hideLoading();
      });
    },
    removeAllBills: function () {
      removeAllBills(this.id, (v) => {
        if (v.status === "OK") {
          this.refresh();
          this.showErrMsg("操作成功");
        } else {
          this.showErrMsg("操作失败: " + v.errmsg, "danger");
        }
      });
    },
    removeBillFromBills: function (billNum) {
      let idx = -1;
      for (let i = 0; i < this.detail.bills.length; i++) {
        if (this.detail.bills[i].billNum === billNum) {
          idx = i;
          break;
        }
      }
      if (idx > -1) {
        this.detail.bills.splice(idx, 1);
      }
    },
    searchHistory: function () {
      searchSettlementHistory(this.id, (v) => {
        this.histories = v;
      });
    },
    reset: function () {
      this.billNum = "";
      this.orderNo = "";
      this.flightOrderNo = "";
      this.psgName = "";
      this.billDate0 = "";
      // this.searchBills()
    },
    searchBills: function () {
      const params = {
        billNo: this.billNum,
        orderNo: this.orderNo,
        flightOrderNo: this.flightOrderNo,
        psgName: this.psgName,
        billDate: this.billDate0,
      };

      this.detail.bills.splice(0);
      searchSettlementBills(this.id, params, (jsonResult) => {
        this.detail.bills = jsonResult;
      });
    },
    writeOff: function () {
      this.modalTitle = "确定销账吗？";

      this.$refs.modalPrompt
        .modal("YesOrNo")
        .then((remark) => {
          const params = {
            receiptId: 0,
            settlementId: this.id,
          };

          writeOffSettlement(params, (v) => {
            if (v.status !== "OK") {
              this.showErrMsg(v.errmsg, "danger");
            } else {
              this.showErrMsg("操作成功");
              this.refresh();
            }
          });
        })
        .catch((ex) => {});
    },
    searchTickets: function () {
      const params = {
        psgName: this.passengerName,
        ticketNo: this.ticketNo,
      };

      // this.showLoading('加载中')
      searchSettlementTickets(
        this.id,
        params,
        (v) => {
          this.tickets = v;
          this.calcTotalTicketAmount();
        },
        () => {
          this.hideLoading();
        }
      );
    },
    calcTotalTicketAmount: function () {
      this.totalTicketAmount = 0;
      this.ticketCount = this.tickets.length;
      for (const info of this.tickets) {
        this.totalTicketAmount += info.accountRecv;
      }

      this.totalTicketAmount = Math.round(this.totalTicketAmount * 100) / 100;
    },
    searchRefunds: function () {
      const params = {};

      // this.showLoading('加载中')
      searchSettlementRefunds(
        this.id,
        params,
        (v) => {
          this.refunds = v;
          this.calcRefunds();
        },
        () => {
          this.hideLoading();
        }
      );
    },
    calcRefunds: function () {
      this.totalRefundAmount = 0;
      this.refundCount = this.refunds.length;
      for (const info of this.refunds) {
        this.totalRefundAmount += info.passengerRefundAmount;
      }

      this.totalRefundAmount = Math.round(this.totalRefundAmount * 100) / 100;
    },
    searchChanges: function () {
      const params = {};

      // this.showLoading('加载中')
      searchSettlementChanges(
        this.id,
        params,
        (v) => {
          this.changes = v;
          this.calcChanges();
        },
        () => {
          this.hideLoading();
        }
      );
    },
    calcChanges: function () {
      this.totalChangeAmount = 0;
      this.changeCount = this.changes.length;
      for (const info of this.changes) {
        this.totalChangeAmount += info.airChangeCharge + info.serviceCharge;
      }

      this.totalChangeAmount = Math.round(this.totalChangeAmount * 100) / 100;
    },
    searchVases: function () {
      const params = {};

      searchSettlementVases(
        this.id,
        params,
        (v) => {
          this.vasList = v;
          this.calcVasList();
        },
        () => {
          this.hideLoading();
        }
      );
    },
    calcVasList: function () {
      this.totalVasAmount = 0;
      this.vasCount = this.vasList.length;
      for (const info of this.vasList) {
        this.totalVasAmount += info.total;
      }

      this.totalVasAmount = Math.round(this.totalVasAmount * 100) / 100;
    },
    searchHotels: function () {
      const params = {};

      searchSettlementHotels(
        this.id,
        params,
        (v) => {
          this.hotelList = v;
          this.calcHotelList();
        },
        () => {
          this.hideLoading();
        }
      );
    },
    calcHotelList: function () {
      this.totalHotelAmount = 0;
      this.hotelCount = this.hotelList.length;
      for (const info of this.hotelList) {
        this.totalHotelAmount += info.totalAmount;
      }

      this.totalHotelAmount = Math.round(this.totalHotelAmount * 100) / 100;
    },
    searchTrains: function () {
      const params = {};

      searchSettlementTrains(
        this.id,
        params,
        (v) => {
          this.trainList = v;
          this.calcTrainList();
        },
        () => {
          this.hideLoading();
        }
      );
    },
    calcTrainList: function () {
      this.totalTrainAmount = 0;
      this.trainCount = this.trainList.length;
      for (const info of this.trainList) {
        this.totalTrainAmount += info.total;
      }

      this.totalTrainAmount = Math.round(this.totalTrainAmount * 100) / 100;
    },
    searchCars: function () {
      const params = {};

      searchSettlementCars(
        this.id,
        params,
        (v) => {
          this.carList = v;
          this.calcCarList();
        },
        () => {
          this.hideLoading();
        }
      );
    },
    calcCarList: function () {
      this.totalCarAmount = 0;
      this.carCount = this.carList.length;
      for (const info of this.carList) {
        this.totalCarAmount += info.total;
      }

      this.totalTrainAmount = Math.round(this.totalTrainAmount * 100) / 100;
    },
    adjustAmount: function () {
      this.modalTitle = "请输入调整金额（扣除）及理由";
      this.$refs.modalAdjustAmount
        .modal(0, "")
        .then((v) => {
          const params = {
            amount: v.price,
            remark: v.remark,
          };
          adjustSettlementAmount(this.id, params, (v) => {
            if (v.status === "OK") {
              this.refresh();
              this.showErrMsg("操作成功");
            } else {
              this.showErrMsg("操作失败: " + v.errmsg, "danger");
            }
          });
        })
        .catch((ex) => {});
    },
    reset3: function () {
      this.passengerName = "";
      this.ticketNo = "";
    },
    undoWriteOff: function () {
      this.modalTitle = "确定撤销销账吗？请输入 OK";

      this.$refs.modalPrompt
        .modal("")
        .then((remark) => {
          const params = {
            settlementId: this.id,
            remark: remark,
          };
          console.log(params);

          undoWriteOffSettlement(params, (v) => {
            if (v.status !== "OK") {
              this.showErrMsg(v.errmsg, "danger");
            } else {
              this.showErrMsg("操作成功");
              this.refresh();
            }
          });
        })
        .catch((ex) => {});
    },
    showBillDetail: function (billInfo, index) {
      const params = {
        id: billInfo.id,
        billNum: billInfo.billNum,
      };

      searchBillDetail(params, (v) => {
        billInfo = v;
        this.detail.bills.splice(index, 1, v);
      });
    },
    hasDetail: function (billInfo) {
      return (
        billInfo.tickets.length > 0 ||
        billInfo.refundTickets.length > 0 ||
        billInfo.changeOrders.length > 0 ||
        billInfo.vasOrders.length > 0
      );
    },
  },
};
</script>